<script lang="ts" setup>
import { ref } from 'vue'
import type { IndexBuffer } from 'XrFrame/kanata/lib/frontend'

// 在线支付弹层
const paymentPopup = ref<UniHelper.UniPopupInstance>()

/** 打开弹层 */
const open = () => {
  paymentPopup.value?.open?.()
}

/** 关闭弹层 */
const close = () => {
  paymentPopup.value?.close?.()
}

// 暴露关闭和显示弹层的方法
defineExpose({ open, close })
const props =  defineProps<{ 
    orderId: string
    amount: number 
  }>()
// 支付渠道索引
const activeIndex = ref(0)
// 支付渠道
const paymentChannel = [
  {
    title: '微信支付',
    thumb: '/static/images/wechatpay-icon.png',
  },
  // #ifndef MP-WEIXIN
  {
    title: '支付宝支付',
    thumb: '/static/images/alipay-icon.png',
  },
  // #endif
  
]
// 自定义事件
const emits = defineEmits<{
  // 事件名：[参数1：类型1，参数2：类型2] 
  close:[],
  change:[index:number],
  confirm:[index:number]
}>()
// 切换支付方式
const handleChange = (index: number) => {
  // 修改高亮
  activeIndex.value = index
  // 触发父组件的 change 事件，将当前 index 传递给父组件
  emits('change', index)
}
</script>
<template>
  <uni-popup :is-mask-click="false" @mask-click="emits('close')" ref="paymentPopup" type="bottom">
    <view class="payment-container">
      <view class="payment-header">
        <text class="title">选择支付方式</text>
        <uni-icons @click="emits('close')" class="uni-icons-close" size="18" color="#333" type="closeempty" />
      </view>
      <view class="order-amount">¥ {{props.amount}} </view>
      <uni-list :border="false">
        <uni-list-item
        v-for="(item, index) in paymentChannel" :key="item.title"
        :title="item.title" 
        :thumb="item.thumb"
        clickable
         @click="handleChange(index)"
        >
          <template #footer>
            <uni-icons
              size="26"
              :color="activeIndex === index ? '#16C2A3' : '#d1d1d1'"
              :type="activeIndex === index ? 'checkbox-filled' : 'circle'"
            />
          </template>
        </uni-list-item>
      </uni-list>
      <button @click="emits('confirm',activeIndex)" class="uni-button">立即支付</button>
    </view>
  </uni-popup>
</template>


<style lang="scss">
.payment-container {
  min-height: 400rpx;
  border-radius: 30rpx 30rpx 0 0;
  background-color: #fff;
  padding: 10rpx 30rpx 40rpx;

  .payment-header {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    margin-bottom: 20rpx;
    font-size: 32rpx;
    color: #333;
    position: relative;
  }

  .uni-icons-close {
    position: absolute;
    top: 2rpx;
    right: 0;
  }

  .order-amount {
    padding: 10rpx 0 10rpx;
    text-align: center;
    font-size: 40rpx;
    color: #333;
  }

  :deep(.uni-list-item__container) {
    padding: 40rpx 0 !important;
  }

  :deep(.uni-list-item--hover) {
    background-color: #fff !important;
  }

  :deep(.uni-list-item__icon) {
    margin-right: 0;
  }

  .uni-button {
    margin-top: 40rpx;
  }
}
</style>